@import "config.less";

body{
    font-size: 14px;display: block;
}
//导航栏
.nissan-header{display: block;}
.nissan-header-m{display: none;}


//共有样式
.content{
    width: @content;margin: 0 auto;box-sizing: border-box;
}

.footer{
    width: 100%;min-width: @content;height: 374px;background: url("/web/views/index/img/footer.jpg") center top no-repeat;
}

@media (max-width: @sreen) {
    html{width: 100%;height: 100%;}
    body{
        font-size: 32/@rem;width: 100%;height: 100%;
    }
    //导航栏
    .nissan-header{display: none;}
    .nissan-header-m{display: block;}
    .content{
        width: 100%;margin: 0;
    }
    .footer{
        height: 161/@rem;background: url("/web/views/index-m/img/footer-bg.jpg") center top / auto 100% no-repeat;min-width: 100%;
    }

    /*header*/
    .nissan-header-m{
        height: 150/@rem;width: 100%;background: #fff;z-index: 999;
        .logo{background: url('/web/img/header-m/logo.png') 6/@rem top / 98% no-repeat;width: 100%;height: 180/@rem;position: absolute;left: 0;top: 0;z-index: 100000;}
        .logo .indexLink{ width: 138/@rem; position: absolute; left: 6/@rem; top: 0; height: 100%;}

        .head-box{position: absolute;right: 18/@rem;font-size:0;top: 90/@rem;height: 50/@rem;z-index: 100001;}
        .head-box .car-btn{display:inline-block;width: 44/@rem;height: 100%;background: url('/web/img/header-m/car.png') center / contain no-repeat;margin-right: 60/@rem;}
        .head-box .yuyue-btn{display:inline-block;width: 44/@rem;height: 100%;background: url('/web/img/header-m/yuyue.png') center / contain no-repeat;margin-right: 60/@rem;}
        .head-box .menu-btn{display:inline-block;width: 36/@rem;height: 100%;background: url('/web/img/header-m/h-menu.png') center / contain no-repeat; position: relative;}
        .head-box .menu-btn span{ display: block;  height: 4/@rem; background: #434343; position: absolute; -webkit-transition:all .6s; transition: all .6s; width: 18/@rem;}
        .head-box .menu-btn .s1{ top: 0; left: 0; }
        .head-box .menu-btn .s2{ top: 0; left: 50%; }
        .head-box .menu-btn .s3{ top: 12/@rem; left: 0; }
        .head-box .menu-btn .s4{ top: 12/@rem; left: 50%; }
        .head-box .menu-btn .s5{ top: 24/@rem; left: 0; }
        .head-box .menu-btn .s6{ top: 24/@rem; left: 50%; }
        .head-box .menu-btn.active .s1,.head-box .menu-btn.active .s3,.head-box .menu-btn.active .s5{ width: 20/@rem;background: #c3002f; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
        .head-box .menu-btn.active .s2,.head-box .menu-btn.active .s4,.head-box .menu-btn.active .s6{ width: 20/@rem; background: #c3002f; -webkit-transform: translateX(-3px)  rotate(45deg); transform: translateX(-3px)  rotate(45deg); }
        .head-box .menu-btn.active .s5,.head-box .menu-btn.active .s6{ opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
        /*menu*/
        #menu{position: absolute;top: 150/@rem;z-index: 99999;background:#fff;padding: 40/@rem 0 40/@rem 50/@rem;box-shadow: 0px 10px 10px rgba(169, 169, 169, 0.59);display: none;}
        #menu-list{overflow: hidden;}
        #menu-list ul li{float: left;margin-bottom: 22/@rem;}
        #menu-list ul li:nth-child(odd){margin-right: 46/@rem;}
        #menu-list ul li a{ width: 240/@rem; height: 128/@rem; display: block;}
        .links a{display: inline-block;height: 60/@rem;margin-right: 20/@rem;font-size: 0;}
        .links a:last-child{margin-right: 0px;}
        .links a img{height: 100%;}
        .other-info .btn{width: 542/@rem;font-size: 28/@rem;height: 64/@rem;line-height: 64/@rem;text-align: center;background: #002870;color: #fff;margin:50/@rem 0px 0px 50/@rem; display: block;}
    }
}

@media (max-width: @sreen) {
    .to-top{display: none!important;}
    .btn-back{display: block;position: fixed;top: 50%;margin-top: -38/@rem;width: 35/@rem;z-index: 9999;height: 74/@rem;background: url("/web/img/btn-back.png") center / contain no-repeat;right: 0;}

    .rank-box{
        margin-top: 0;
        .first{
            width: 700px;margin: 0 auto;height: 463px;
            .pic-box{
                float: left;height: 100%;width: 350px;background-image: url("/web/views/index/img/rank-first-bg.png");padding: 20px 15px 17px 17px;box-sizing: border-box;
                .pic{display: block;background: center / cover no-repeat;width: 100%;height: 100%;position: relative;}
            }
            .info{
                float: left;width: 310px;margin: 80px 0 0 40px;
                .name{margin-top: 50px;font-size: 32px;font-weight: bold;color: #d01e25;}
                .text{color: #595757;font-size: 20px;margin-top: 10px;line-height: 30px;}
            }
        }
        .ul{
            margin: 0 0 0 -54/@rem;overflow: hidden;padding-left: 83/@rem;
            .li{
                margin: 66/@rem 0 0 54/@rem;
                .pic{
                    width: 210/@rem;height: 280/@rem;border-width: 4/@rem;
                    .cover{
                        display: none;
                    }
                }
                .text{
                    font-size: 18/@rem;text-align: center;padding: 26/@rem 0 10/@rem;line-height: 24/@rem;
                }
            }
        }
        .rank-like{
            height: 24/@rem;padding: 0 10/@rem 0 30/@rem;z-index: 1;min-width: 64/@rem;font-size: 18/@rem;line-height: 24/@rem;top: 12/@rem;left: 12/@rem;background-size: 15/@rem;border-radius: 6/@rem;background-position: 8/@rem 6/@rem;
        }
        .to-vote{
            width: 285px;height: 70px;background: url("/web/views/index/img/to-vote.png");display: block;margin: 70px auto 0;
        }
        .btn-vote{
            width: 154/@rem;height: 39/@rem;display: block;margin: 0 auto;background-size: contain;
        }
    }
}